<script setup lang="ts">
import { provide, watch, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import type { ComponentSize } from 'element-plus'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useWindowSize } from '@vueuse/core'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'

const { variables } = useDesign()

const appStore = useAppStore()

const props = defineProps({
  size: propTypes
    .oneOf<ComponentSize>(['default', 'small', 'large'])
    .def('default'),
})

provide('configGlobal', props)

// 初始化所有主题色
onMounted(() => {
  appStore.setCssVarTheme()
})

const { width } = useWindowSize()

// 监听窗口变化
watch(
  () => width.value,
  () => {
    // 窗口变化处理逻辑
  },
  {
    immediate: true,
  }
)

const currentLocale = zhCn
</script>

<template>
  <ElConfigProvider
    :namespace="variables.elNamespace"
    :locale="currentLocale"
    :message="{ max: 5 }"
    :size="size"
  >
    <slot></slot>
  </ElConfigProvider>
</template>
